<template>
    <el-form ref="form">
        <el-form-item label="数据集名称" label-width="100px">
            <el-input v-model="title" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="数据集标识" label-width="100px">
            <el-input v-model="name" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="选择类型" label-width="100px">
            <el-radio-group v-model="type">
                <el-radio label="first">单条</el-radio>
                <el-radio label="select">多条</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="选择类型" label-width="100px" v-if="type =='select'">
            <el-input-number v-model="page" :min="2" :max="100" label="分页条数"></el-input-number>
        </el-form-item>
        <el-form-item label="选择模型" label-width="100px">
            <el-select v-model="index" placeholder="请选择类型">
                <el-option :label="item.title" :value="index" v-for="(item,index) in present" :key="index"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="选择字段" v-if="fields.length" label-width="100px">
            <el-checkbox-group v-model="selected">
                <el-checkbox :label="index" name="type" v-for="(item,index) in fields" :key="index">{{item.title}}</el-checkbox>
            </el-checkbox-group>
        </el-form-item>
    </el-form>
</template>
<script type="text/javascript">
export default {
    props: {
        value: [Array, Object, Number, String]
    },
    data() {
        return {
            title: "",
            name: "",
            type: "first",
            index: "",
            page: 20,
            fields: [],
            selected: [],
            dialogVisible: false
        };
    },
    /**
     * 计算属性
     * @type {Object}
     */
    computed: {
        present: function(argument) {
            return this.value.present
        },
        target: function(argument) {
            return this.value.target
        }
    },
    /**
     * 数据监听
     * @type {Object}
     */
    watch: {
        index(value) {
            this.fields = this.present[value].fields;
        }
    },
    /**
     * 页面加载执行
     * @return {[type]} [description]
     */
    mounted() {

    },
    methods: {
        handleClose() {
            this.dialogVisible = false;
        },
        /**
         * 输入内容检测
         * @return {[type]} [description]
         */
        checked(data) {
            let tips = '';
            let ret = true;
            let reg = /^[a-zA-Z][A-Za-z0-9_]*$/;
            if (data.title == '') {
                tips = '请输入数据集标题';
                ret = false;
            } else if (data.name == 'index' || !reg.test(data.name)) {
                tips = '唯一标识符不符合规则';
                ret = false;
            } else if (data.type == '') {
                tips = '请设置数据集类型';
                ret = false;
            } else if (data.type == 'select' && !data.page) {
                tips = '请设置分页';
                ret = false;
            } else if (data.fields.length < 1) {
                tips = '请选择模型';
                ret = false;
            } else if (reg.test(data.name)) {
                if (this.target) {
                    if (Array.isArray(this.target)) {
                        this.target.forEach(item => {
                            if (item.name == data.name) {
                                tips == '该数据集标识符已存在！';
                                ret = false;
                            }
                        })
                    }
                }
            }

            if (!ret) {
                this.$message.warning(tips);
            }
            return !ret;

        },


        /**
         * 确认创建
         */
        handleAffirm() {
            let index = this.index;
            console.log("查看测试i", this.present[index]);
            let models = {
                title: this.title,
                name: this.name,
                model: this.present[index].name,
                type: this.type,
                page: this.page,
                fields: []
            };
            for (let i in this.selected) {
                let key = this.selected[i];
                let item = this.fields[key];
                console.log(i, item);
                models.fields.push(item);
            }
            /**
             * 添加之前进行检测
             */
            if (this.checked(models)) {
                return false;
            }
            this.target.push(models);
            this.dialogVisible = false;
        }
    }
}
</script>
<style type="text/css" lang="scss">
</style>